<template>
<q-dialog class="bar-dialog" v-model="show" persistent maximized>
  <q-card class="full-width full-height flex bg-white screen">
    <q-card-section class="row items-center q-pb-none full-width">
      <div class="text-h6 text-weight-bold">{{title}}</div>
      <q-space />
      <q-btn @click="hideDialog" flat round size="sm" color="primary" icon="iconfont icontubiao-133">
        <q-tooltip>关闭</q-tooltip>
      </q-btn>
    </q-card-section>
    <q-card-section class="dialog-content">
      <div class="chart" ref="dialogChart"></div>
    </q-card-section>
  </q-card>
</q-dialog>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    title: {
      type: String,
      default: '当班停机原因'
    }
  },
  data () {
    return {
      show: false,
      info: [],
      barChart: null
    }
  },
  methods: {
    // 显示弹框
    showDialog (info) {
      this.show = true
      this.initInfo(info)
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (info) {
      this.info = info
      this.$nextTick(() => {
        this.setBarOption()
      })
    },
    // 显示柱状图
    setBarOption () {
      const xData = this.info.map(item => item.name)
      let option = {
        grid: {
          top: 35,
          bottom: 30,
          left: 40,
          right: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          },
          formatter: (params, ticket, callback) => {
            let htmlStr = ''
            let value = params[0].value
            let color = `linear-gradient(#44D8C6, #5F77FD)`
            let name = params[0].name

            htmlStr += '<div>' + name + '</div>'
            htmlStr += '<div>'
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-image:' + color + ';"></span>'
            htmlStr += value + '分钟'

            htmlStr += '</div>'
            return htmlStr
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333', // X轴文字颜色
              fontSize: 14
            },
            formatter: function (value) {
              const v = value.length > 20 ? value.substr(0, 10) + '...' : value
              return v
            }
          },
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#d3d3d3'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '时间(min)',
          nameTextStyle: {
            color: '#333333',
            fontSize: 14
          },
          nameGap: 20,
          // interval: 30,
          splitLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333',
              fontSize: 14
            }
          },
          axisLine: {
            show: false
          }
        },
        series: {
          type: 'bar',
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#44D8C6'
              },
              {
                offset: 1,
                color: '#5F77FD'
              }]),
              barBorderRadius: [6, 6, 0, 0]
            }
          },
          label: {
            show: true,
            position: 'top',
            color: '#5F77FD',
            fontSize: 12
          },
          data: this.info
        }
      }
      this.barChart = echarts.init(this.$refs.dialogChart)
      this.barChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="stylus">
  .dialog-content{
    width 100%
    height calc(100vh - 50px)
    display flex
    justify-content center
    align-items center
    .chart{
      width 80%
      height 80vh
    }
  }
</style>
